<template>
    <div id="yksLayout" :class="['user-layout-wrapper', device]" >
        <!-- <div class="Header"></div> , lg: 2, md: 2, sm: 1, xs: 1-->
        <div v-show="!ismore" >
            <a-list
      :grid="{column: 2,gutter: 24}"
      :dataSource="dataSource" 
    >
      <a-list-item slot="renderItem" slot-scope="item, index" >
        <template v-if="index===0" >
          
          <a-card class="card" :hoverable="true" >
            <div style="margin-left: 550px;top: 20px; position: relative;color: #EE7B1B;font-weight: bold;" @click="showmore(item.type)">更多</div>
            <a-card-meta style="height: 270px;">
              <div style="margin-bottom: 3px;color: #EE7B1B;font-weight: bolder;" slot="title">{{ item.title }}</div>
              <!-- <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/> -->
              
              <div class="meta-content" slot="description" >{{ item.content1 }}</div>
              <div class="meta-content" slot="description" style="margin-top: -100px;height: 100px;">{{ item.content2 }}</div>
            </a-card-meta>
          </a-card>
        </template>
        <template v-else style="background-color:black;">
            <a-card class="card" :hoverable="true" style="background-color: #FBE5D6;">
              <div style="margin-left: 550px;top: 20px; position: relative;color: #EE7B1B;font-weight: bold;" @click="showmore(item.type)">更多</div>
            <a-card-meta style="height: 270px;">
                <div style="margin-bottom: -3px;color: #EE7B1B;font-weight: bolder;" slot="title">{{ item.title }}</div>
                <div class="meta-rollcard" slot="description" style="background-color: #FBE5D6;">
                  <RollCard :type="item.type"></RollCard>
                </div>
                <!-- <IndexYkCases ref="indexYkCases" v-if="isCase"></IndexYkCases> -->
            </a-card-meta>
            <!-- <template class="ant-card-actions" slot="actions">
              <a>更多</a>
            </template> -->
          </a-card>
            
        </template>
      </a-list-item>
    </a-list>
            
        </div>
        <template v-show="ismore">
          
          <IndexYksTec ref="indexYkTec" v-if="ismore&&moreType==='tec'" @showMain="showMain"></IndexYksTec>
          <IndexYkDevices ref="indexYkDevices" v-if="ismore&&moreType==='device'" @showMain="showMain"></IndexYkDevices>
          <IndexYkCases ref="indexYkCases" v-if="ismore&&moreType==='case'" @showMain="showMain"></IndexYkCases>
          <IndexYksNews ref="indexYksNews" v-if="ismore&&moreType==='news'" @showMain="showMain"></IndexYksNews>
        <!-- <a-tabs defaultActiveKey="1">
                <a-tab-pane tab="设备展示" key="1" forceRender>
                    <IndexYkDevices ref="indexYkDevices"></IndexYkDevices>
                </a-tab-pane>
                <a-tab-pane tab="丫肯科技" key="2" forceRender>
                    <IndexYksTec ref="indexYkTec"></IndexYksTec>
                </a-tab-pane>
                <a-tab-pane tab="案例展示" key="3" forceRender>
                    <IndexYkCases ref="indexYkCases"></IndexYkCases>
                </a-tab-pane>
                <a-tab-pane tab="AE设备新闻" key="4" forceRender>
                    <IndexYksNews ref="indexYksNews"></IndexYksNews>
                </a-tab-pane>
            </a-tabs> -->
          </template>
    </div>
</template>

<script>
import IndexYkDevices from './IndexYkDevices.vue';
import IndexYkCases from './IndexYkCases.vue';
import { mixin, mixinDevice } from '@/utils/mixin.js'
import IndexYksTec from './IndexYksTec.vue';
import IndexYksNews from './IndexYksNews.vue';
import { httpAction, getAction } from '@/api/manage'
import RollCard from '../../components/yks/RollCard.vue';
// const dataSource = []
//   for (let i = 0; i < 4; i++) {
//     dataSource.push({
//       title: 'Alipay',
//       avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//       content: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。'
//     })
//   }
export default {
    name: 'IndexYks',
    mixins: [mixin, mixinDevice],
    watch:{
        device() {
        if (this.multipage && this.linkList.indexOf(indexKey) === -1) {
          this.addIndexToFirst()
        }
      },
    },
    data() {
        return {
            defaultActiveKey: '1',
            dataSource:[
              {
                title:'关于丫肯',
                type:'tec',
                content1:'       丫肯科技（AHKING）成立于2003年，总部位于中国金融中心的上海。以经营金属制造与加工行业的石油化学品（MPC）、智能环保设备与环保工程（EP）及自动化工业清洗设备（AE）为核心业务。旗下拥有丫肯（上海）新材料科技有限公司、丫肯（上海）环保科技有限公司、丫肯（江苏）实业发展有限公司。',
                content2:'AKTICP是丫肯科技智能云管理系统。此系统可有效地对项目及相关设备进行运行、运维管理及运行数据管理。丫肯科技唯一拥有本系统源代码与源程序的所有权，及完全的知识产权，此能充分地保障基于此系统上设备运行的安全性、可靠性与稳定性能。',
            },
            {
                title:'项目展示',
                type:'device',
                cases:[{text:'展示'}]
            }
            ,
            {
                title:'案例展示',
                type:'case',
                cases:[{text:'展示'}]
            }
            ,
            
            {
                title:'最新资讯',
                type:'news',
                cases:[{text:'展示'}]
            }
        ],
        cases:[],
        url: {
            list: "/mng/yksPublishs/list",
            treeData:"/sys/category/loadTreeRoot",
          },
          ismore:false,
          moreType:'tec'
        };
    },
    components: { IndexYkDevices,IndexYkCases, IndexYksTec,IndexYksNews,RollCard },
    mounted(){
        this.loading = true
        this.loadData(1)
      },
    methods:{
        loadData(arg) {
          if(!this.url.list){
            this.$message.error("请设置url.list属性!")
            return
          }
          let that=this
          //加载数据 若传入参数1则加载第一页的内容
          if (arg === 1) {
            // this.ipagination.current = 1;
          }
          var params = {}//this.getQueryParams();//查询条件
        //   params.publishType = "case";
          this.loading = true;
          getAction(this.url.list, params).then((res) => {
            if (res.success) {
                debugger
              //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
              let result = res.result.records||res.result;
              for(var i=0;i<result.length;i++){
                result[i].coverimageUrl=window._CONFIG['domianURL']+'/'+result[i].coverimageUrl
                // this.allCases.push(Object.assign({}, this.cases[i]))
              }
              this.cases=result
              that.cases=result
            //   this.dataSource[1].cases=result
              // if(res.result.total)
              // {
              //   this.ipagination.total = res.result.total;
              // }else{
              //   this.ipagination.total = 0;
              // }
              //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            }else{
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.loading = false
          })
        },
        showmore(moreType){
            this.ismore=true;
            this.moreType=moreType;
        },
        showMain()
        {
          this.ismore=false;
        }
    }
}
</script>
<style lang="less" scoped>
    #yksLayout.user-layout-wrapper {
        height: 300px;
        .Header{
        width: 100%;
        min-height: 100%;
        background: #FBE5D6 url(~@/assets/index.png) no-repeat 50%;
        background-size: 100%;
        }
    }
    .card{
        border-radius: 5px;
        width: 100%;
        //margin-left:10px;
        margin-top: 10px;
        background-color: #FBE5D6;
    }
    .ant-card-actions {
    background: #180000;
    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 10%;
        &:hover {
          color: #1890ff;
        }
      }
    }
  }
    .meta-content {
      text-indent: 2em;
      background-color: #FBE5D6;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 200px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .meta-rollcard{
    background-color: #FBE5D6;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 250px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>